﻿<!DOCTYPE html>
<html>
<head>
    <title>북 페이지</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, 
        maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
    <link href="../../fundamental/basic.css" rel="stylesheet" type="text/css"  media="screen" />
    <link href="../../fundamental/responsive.css" rel="stylesheet" type="text/css"  media="screen" />
    <link href="../css/book_style.css" rel="stylesheet" type="text/css" />
    <link href="../green/style.css" type="text/css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-2.0.3.js" type="text/javascript"></script>
    <script src="../../fundamental/main_aside.js" type="text/javascript"></script>
    <script src="../js/jquery.tablesorter.min.js" type="text/javascript"></script>
    <script src="../js/image.js" type="text/javascript"></script>
    <script src="../js/list_table.js" type="text/javascript"></script>
    <script src="../js/over_layer.js" type="text/javascript"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <header id="main_header">
                <hgroup id="title">
                    <h1><a href="#"><img src="TITLE.png" alt="title" width="135" height="45"/></a></h1>
                    <h2>USER ID</h2>
                </hgroup>
                <nav id="main_gnb" class="span_2">
                    <h1><a href="#">LOG OUT</a></h1>
                </nav>
                <nav id="main_lnb" class="span_6">
                    <h1>BOOK TITLE</h1>
                </nav>
            </header><!--header-->
        </div>
        
        <div class="row">
            <div id="content">
                <aside id="main_aside" class="span_2">
                    <ul id="aside_list">
                        <li class="aside_menu">EXCHANGE<img src="http://placehold.it/10x10" /></li>
                        <li class="sub">
                            <ul>
                                    <li><a href="#">현재 사이버 머니</a></li>
                                    <li><a href="#">환전 하기</a></li>
                                    <li><a href="#">환전 내역</a></li>
                            </ul>
                        </li>
                        <li class="aside_menu">HISTORY<img src="http://placehold.it/10x10" /></li>
                        <li class="sub">
                            <ul>
                                <li><a href="#">판매 내역</a></li>
                                <li><a href="#">구매 내역</a></li>
                            </ul>
                        </li>
                        <li class="aside_menu">GROUP<img src="http://placehold.it/10x10" /></li>
                        <li class="sub">
                            <ul>
                                <li><a href="#">가입 그룹</a></li>
                                <li><a href="group_enroll.html">그룹 만들기</a></li>
                            </ul>
                        </li>
                        <li class="aside_menu">EDIT</li>
                        <li class="aside_menu">회원 탈퇴</li>
                    </ul>
                </aside><!--main_aside-->
            
                <div id="main_section" class="span_10">
                    <h1>책 페이지</h1>
                    <div id="main_section_body">
                        <header id="book_header">
                            <h2>책 소개</h2>
                        </header>
                        <div id="book_content">
                            <div id="book_inform">
                                <span>제목</span><br />
                                <span>저자</span><br />
                                <span>출판사</span><br />
                                <span>경매 시작가</span><br />
                                <span>경매 기간 : 0000/00/00 00:00 ~ 0000/00/00 00:00</span>
                                <article>
                                    책 특이사항
                                </article>
                            </div>
                            
                            <div id="image_wrap">
                                <h3>사 진</h3>
                                <p id="image_prev"><img src="../img/front.png" width="40" height="60" alt="앞으로" /></p>
                                <p id="image_next"><img src="../img/after.png" width="40" height="60" alt="뒤로" /></p>
                                <div id="image">
                                    <div id="image_inner">
                                        <ul class="column" style="background-color:palevioletred">
                                            <li><a href="../img/500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                            <li><a href="../img/500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                            <li><a href="../img/500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                            <li><a href="../img/500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                        </ul>
                                        <ul class="column" style="background-color:lightskyblue">
                                            <li><a href="../img/500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                            <li><a href="../img/500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                            <li><a href="../img/500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                            <li><a href="../img/500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                        </ul>
                                        <ul class="column" style="background-color:limegreen">
                                            <li><a href="../img/500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                            <li><a href="../img/500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                            <li><a href="../img/500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                            <li><a href="../img/s500x500.jpg" class="modal"><img src="http://placehold.it/130x130" alt="" /></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div><!--image_wrap-->
                            <hr />
                            <hr />
                            <div id="customer_table">
                                <h3>구매자 리스트</h3>
                                <table id="list_table" class="tablesorter">
                                    <thead>
                                        <tr>
                                            <th style="width:50px;">No.</th>
                                            <th style="width:200px;"><span>이</span>름</th>
                                            <th><span>가</span>격</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>정원빈</td>
                                            <td>20000</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>  
                                            <td>이다영</td>
                                            <td>24000</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>조선영</td>
                                            <td>60000</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>김준호</td>
                                            <td>20500</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>진명호</td>
                                            <td>20500</td>
                                        </tr>
                                        <tr>
                                            <td>6</td>
                                            <td>김민준</td>
                                            <td>1000000</td>
                                        </tr>
                                        <tr>
                                            <td>7</td>
                                            <td>이호준</td>
                                            <td>800</td>
                                        </tr>
                                        <tr>
                                            <td>8</td>
                                            <td>윤상혁</td>
                                            <td>200</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div><!--customer_table-->
                            <form id="apply_form">
                                <label for="apply_price">가격 신청</label><input id="apply_price" type="text" placeholder="구매 희망 가격" />
                                <input type="submit" value="신청" />
                            </form>
                        </div><!--book_content-->
                    </div><!--group_inform-->
                </div><!--main_section-->
            </div><!--content-->
        </div>
        <div class="row">
            <footer id="main_footer">
                <small>MEMBER : <span>Jung. WonBeen</span><span>Kim. JoonHo</span><span>Jo. SunYoung</span><span>Lee. DaYoung</span></small>
            </footer><!--footer-->
        </div>
    </div>
</body>
</html>
